<template>
  <view class="shopDetail_box">
    <!--自定义导航栏-->
    <view class="detail_navbar">
      <u-navbar
          :title="navTitle"
          title-size="32"
          title-color="color:#3D3D3D"
          back-icon-color="#000"
          back-icon-size="36"
          :border-bottom="false"
          :background="{background: 'none'}"
      ></u-navbar>
    </view>
    <!--主题内容-->
    <view class="detail_content">
      <scroll-view
          scroll-y
          class="detail_scroll">
        <view class="detail_bg"></view>
        <view class="detail_box">
          <!-- 店铺信息 -->
          <view class="shops_list" v-if="detailsData.name">
            <view class="shop_list_item">
              <view class="shop_info">
                <view class="shop_name ellipsis-two-line">{{ detailsData.name }}</view>
                <view class="adress_shop">
                  <text class="place_text">配送时长 : {{ detailsData.deliveryTimeTip }}</text>
                  <text style="margin: 6rpx 18rpx;border-right: 2rpx #EFEFEF solid"></text>
                  <text class="place_text">距离 : {{ detailsData.deliveryDistance || '0km' }}</text>
                </view>
              </view>
              <view class="shop_list_item_img" style="position: relative">
                <image class="shop_list_image" v-if="detailsData.picture" :src="detailsData.picture"></image>
                <image v-else class="shop_list_image"
                       src="https://img.alicdn.com/imgextra/i3/3829152210/O1CN01gKAL671SCE3PjsESI_!!3829152210.png"
                       style="border-radius: 20rpx;"></image>
                <view style="position: absolute;top: 0;right: 0">
                  <image style="width: 64rpx;height: 32rpx;border-radius: 0"
                         :src="imgurlBwc + 'feast/gf_icon1.png'"></image>
                </view>
              </view>
            </view>
            <u-line color="#EEEEEE"></u-line>
            <view class="shifupeisong">
              <view class="icons_box">
                <view class="ps_icon" style="flex: 1;align-items: center" @tap="isChooseList = true">查看可否配送</view>
                <view class="sb_icon" style="flex: 1;align-items: center" @click="openService">
                  失败上报
                </view>
              </view>
            </view>
          </view>
          <!-- 多个活动 -->
          <view class="actives_box">
            <view class="tabs_t">
              <text v-for="(aitem, index) in activity" :class="tabIndex === index ? 'cur':''"
                    @tap="handleChangeTabs(aitem, index)"
                    :key="index">活动{{ index + 1 }}
              </text>
            </view>
            <u-line color="#EEEEEE"></u-line>
            <view class="change_box" v-if="activity_item">
              <!-- 活动 -->
              <view class="small_box">
                <view class="text_t fs_icon">份数：</view>
                <view class="bl_box">
                  <view class="u-line-progress">
                    <view class="progress" :style="'width:'+activity_item.percent+'%'"></view>
                  </view>
                  <text class="val_num" style="color: #000;width: 80px;">剩余
                    <text style="color: #FBA243;font-weight: bold;">{{ activity_item.inventory }}份</text>
                  </text>
                </view>
              </view>
              <u-line color="#EEEEEE"></u-line>
              <!-- 规则 -->
              <view class="small_box" style="align-items: flex-start;">
                <view class="text_t yq_icon">要求：</view>
                <view v-if="activity_item.planActivityType == 0" class="val_text">
                  <view>无需求</view>
                </view>
                <view v-else-if="activity_item.planActivityType == 1" class="val_text">
                  <view>{{ remarkRem.need_assess }}</view>
                </view>
                <view v-else-if="activity_item.planActivityType == 2" class="val_text">
                  <view>{{ remarkRem.not_need_assess }}</view>
                </view>
              </view>
              <u-line color="#EEEEEE"></u-line>
              <!-- 补贴 -->
              <view class="small_box">
                <view class="text_t bt_icon">补贴：</view>
                <view style="display: flex;align-items: center;">
                  <view>本单返实付的</view>
                  <view class="vip_text" >{{ activity_item.commission.ratio }}%</view>
                  <view style="width: 2rpx;height: 30rpx;margin: 0 10rpx;background: #dddddd"></view>
                  <view>最高返</view>
                  <view class="vip_text" >{{ activity_item.commission.maxCommission }}元</view>
                </view>
              </view>
              <u-line color="#EEEEEE"></u-line>
              <gfphone :isMTPhone="isMTPhone" @mt_mobile="mtMobileFun"></gfphone>
            </view>
          </view>
          <!-- 商品信息 -->
          <view v-if="detailsData.skuList">
            <gf-other-goods :goodsList="detailsData.skuList"></gf-other-goods>
          </view>
          <!--福利群和邀请好友-->
          <benefit></benefit>
          <!--注意事项-->
          <view >
            <activityRule :activityRule="detailsData.new_activityRule"></activityRule>
          </view>
        </view>
      </scroll-view>
    </view>
    <!--底部按钮-->
    <view class="detail_footer">
      <view v-if="isInventory" class="detail_footer_btn">
        <view class="btn-zu3">已售罄</view>
      </view>
      <view v-else class="detail_footer_btn">
        <view @tap="bdTel" class="btn-zu1">抢单报名</view>
        <!--<view class="btn-zu2">领红包并立即抢单</view>-->
      </view>
    </view>

    <!-- 抢单须知 -->
    <u-popup v-model="knowShow" mode="center" border-radius="20" width="80%" >
      <view class="wm_box">
        <view class="content_boxs">
          <view class="know_t">抢单须知</view>
          <view class="desc_text"  style="padding: 20rpx;line-height: 50rpx;">
            <u-parse :html="success_notice"></u-parse>
            <text style="margin-top: 20rpx;color: #FE874B">{{ count }}s后自动跳转</text>
          </view>
          <view class="btns_con"
                style="display: flex;justify-content: space-around;margin: 30rpx 20rpx;position: relative">
            <view>
              <view class="btns_cancel" @click="cancelToOrder">取消订单</view>
            </view>
            <view>
              <button class="btns_box" @click="goShop()">进入店铺{{  count + "s" }}
              </button>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 是否可配送 -->
    <u-popup v-model="isChooseList" border-radius="20" mode="bottom" :closeable="true">
      <view class="pop-box" style="background: #f8f8f8">
        <view class="box-title"
          style="height: 130rpx;line-height: 130rpx;font-size: 32rpx;text-align: center;">
          请选择进店方式
        </view>
        <view style="margin: 0 30rpx 30rpx;">
          <view
              class="box-item"
              v-for="(item, index) in chooseList"
              :key="index"
              @click="onChooseList(index)"
              style="display: flex;height: 120rpx;align-items: center;text-align: center;background: #FFFFFF;border-radius: 20rpx;"
          >
            <View class="icon-content1" style="padding: 10rpx;margin: 0 30rpx;border-radius: 50%;background: #f8f8f8;">
              <u-icon :name="item.icon" size="40" color="#666666"></u-icon>
            </View>
            <view class="box-item-content-name" style="flex: 1;text-align: left;">
              <text style="font-size: 32rpx;">{{ item.name }}</text>
              <text v-if="index===0" class="to-shop" style="font-size: 22rpx;margin-left: 10rpx;padding: 4rpx 6rpx;background: #fc4106;border-radius: 6rpx;color: #ffffff; ">直接进店</text>
            </view>
            <View class="icon-content" style="margin: 0 20rpx;">
              <u-icon name="arrow-right" size="32" ></u-icon>
            </View>
          </view>
        </view>
        <view style="height: 20rpx"></view>
      </view>
    </u-popup>
    <!-- 抢单提示 -->
    <u-popup v-model="qdTip" border-radius="20" mode="center">
      <view class="qd-content" v-if="activity_item.rule">
        <view class="title">
          抢单说明
        </view>
        <view v-for="(item, index) in activity_item.rule" :key="index">
          <view class="tip" :class="index === activity_item.rule.length-1 ? 'tip1' : ''">
            {{ item }}
          </view>
        </view>
        <view class="tip tip1">
          {{ activity_item.rule.length + 1 }}、本单号码:【{{ mtPhone }}】，报名手机号必须与美团登录账号一致
        </view>
        <view class="btns_con">
          <view style="flex: 1"></view>
          <button class="zbbm" @click="qdTip = false">暂不报名</button>
          <button class="submit" @click="qdTip = false;confirmSignUpFun()">确定报名</button>
        </view>
      </view>
    </u-popup>
    <!--没有绑定手机号，弹窗提示微信授权绑定手机号-->
    <u-popup v-model="isShowBindPhone" :mask-close-able="false" border-radius="20" mode="center" width="80%" height="350rpx" >
      <view class="bind_phone_box">
        <view class="bind_phone_title">提示</view>
        <u-line color="#EEEEEE" ></u-line>
        <view class="bind_phone_content">
          <view class="bind_phone_content_text">
            请授权微信绑定手机号后，才能领取新人奖励。
          </view>
        </view>
        <u-line color="#EEEEEE" ></u-line>
        <view class="bind_phone_content_btn">
          <button class="wechat-btn" @click="cancelFun" style="color: #888888">取消</button>
          <u-line color="#EEEEEE" direction="col"></u-line>
          <button class="wechat-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="color: #FD7C22;">授权绑定</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import gfphone from './components/gfphone.vue'
import GfOtherGoods from "./components/gf-other-goods.vue";
import Benefit from "./components/benefit.vue";
import ActivityRule from "@/subpackageA/pages/feast-shopdetail/components/activityRule.vue";
const app = getApp();
export default {
  components: {ActivityRule, Benefit, GfOtherGoods, gfphone},
  data() {
    return {
      imgurlBwc: app.globalData.imgurlBwc,
      BestImgUrl: app.globalData.imgurl,
      navTitle: '店铺详情',
      detailsData: {},//店铺详情数据
      success_notice: "<p style='text-align: left;'><span style='color: rgb(255, 122, 69); background-color: rgb(255, 255, 255);'>抢单成功！</span><span style='color: rgb(140, 140, 140); background-color: rgb(255, 255, 255);'>下单仔细核对</span><span style='color: rgb(255, 122, 69); background-color: rgb(255, 255, 255);'> 店名</span><span style='color: rgb(140, 140, 140); background-color: rgb(255, 255, 255);'> 及 </span><span style='color: rgb(255, 122, 69); background-color: rgb(255, 255, 255);'>地址</span><span style='color: rgb(140, 140, 140); background-color: rgb(255, 255, 255);'>，下单美团账号必须与提交报名的美团账号一致，否则无效；</span><span style='color: rgb(255, 122, 69); background-color: rgb(255, 255, 255);'>抢单后请在30分钟内下单</span><span style='color: rgb(140, 140, 140); background-color: rgb(255, 255, 255);'>，名额过期回收无返利，不可恢复；名额过期后需要下单的需重新报名下单才有效。下单后可返回平台看报名</span><span style='color: rgb(255, 122, 69); background-color: rgb(255, 255, 255);'>状态是否为“已下单</span><span style='color: rgb(140, 140, 140); background-color: rgb(255, 255, 255);'>”，报名成功并下单代表您也知晓理解活动规则。</span></p >",

      //查看配送方式列表
      chooseList: [
        {
          icon: "home",
          name: "小程序进店",
        }
      ],
      isChooseList: false, //显示查看配送方式弹窗
      activity: [],//活动数据
      activity_item: {}, //活动详情
      // 要求规则
      remarkRem: {
        is_show: 0,
        need_assess: "需要评鉴，本活动与美团官方合作，请在报名后30分钟内使用绑定报名的美团账号下单；认真阅读抢单说明及注意事项。",
        not_need_assess: "无需评鉴，本活动与美团官方合作，请在报名后30分钟内使用绑定报名的美团账号下单；认真阅读抢单说明及注意事项。"
      },
      isInventory: false,//是否是售罄
      tabIndex: 0, //tab索引
      takeMoney: 0, //抢单金额
      isMTPhone: false,//显示电话弹窗
      qdTip: false,//抢单提示
      mtPhone: '',//关联美团手机号
      phone: '',//手机号
      knowShow: false,//抢单须知弹窗
      count:  0,//倒计时
      timer: null, // 倒计时定时器
      isShowBindPhone: false, // 是否显示微信授权手机号弹窗
    };
  },
  onLoad(options) {
    this.detailsData = JSON.parse(decodeURIComponent(options.data))
    // 遍历数据
    this.detailsData.planActivityInfoList.forEach((item, index) => {
      // 选中当前活动
      if (index == options.index){
        // 判断是否售罄
        if (item.inventory == 0) {
          this.isInventory = true
        }
        this.activity_item = item
        this.remarkRem.is_show = item.need_assess
      }
    })
    // 获取活动数据
    this.activity = this.detailsData.planActivityInfoList
    // 获取关联美团手机号
    this.mtPhone = uni.getStorageSync('userinfo').mt_mobile;
    // 获取手机号
    this.phone = uni.getStorageSync('userinfo').username;
    console.log('关联美团手机号',  this.mtPhone);
    // this.GetUserInfo()
  },
  methods: {
    // tab切换
    handleChangeTabs(item, Index){
      console.log('选中的选项=', item, Index)
      let that = this
      that.tabIndex = Index
      that.activity_item = item
      if (item.inventory == 0){
        this.isInventory = true
      } else {
        this.isInventory = false
      }
    },
    // 返回绑定美团手机号
    mtMobileFun(phone){
      let that = this
      that.mtPhone = phone
    },
    onChooseList(index){
      this.isChooseList = false
      let actionUrl = this.detailsData.actionUrl
      console.log('actionUrl==', actionUrl)
      switch (index) {
        case 0:
          // knowshow.value = false
          uni.openEmbeddedMiniProgram({
            appId: actionUrl.wxAppid,
            path: actionUrl.wxPath,
            success: function (res) {
              console.log(res)
            },
            fail: function (res) {
              console.log(res)
            }
          })
          break;

      }
    },
    bdTel(){
      let that = this
      // 账号未关联美团手机号
      if (!that.mtPhone) {
        uni.showModal({
          title: '关联美团手机号-提示',
          content: '请关联美团手机号，用于抢单核验，和订单状态通知',
          confirmText: '去关联',
          success: function (res) {
            if (res.confirm) {
              this.isMTPhone = true
            }
          }.bind(that)
        })
      } else if (!that.phone) {
        // 显示微信授权手机号弹窗
        this.isShowBindPhone = true
      } else {
        that.qdTip = true
      }
    },
    confirmSignUpFun(){
      let that = this
      that.timer = 6
      that.getTimeFun(that.timer)
      // 提交订单并跳转到美团小程序
      that.getOfficialActivityFun()
    },
    // 进入店铺
    goShop() {
      let that = this
      that.knowShow = false
      // 清除定时器
      that.clearTimer()
      // 提交订单并跳转到美团小程序
      that.goMeituanShop()
    },
    // 提交订单并跳转到美团小程序
    getOfficialActivityFun(){
      let that = this
      let token = uni.getStorageSync('token')
      if (token) {
        // 账号未绑定手机
        if (!this.phone) {
          uni.showModal({
            title: '绑定手机号-提示',
            content: '抢单需要绑定手机号，用于订单核验，和订单状态通知，是否去绑定？',
            confirmText: '去绑定',
            success: async function (res) {
              if (res.confirm) {
                /* await uni.navigateTo({
                  url: "/mePages/pages/BasicSettings/ChangebindingPhone"
                }) */
                // 显示微信授权手机号弹窗
                that.isShowBindPhone = true
              }
            }
          })
          return
        }

        let lat = uni.getStorageSync('lat')
        let lon = uni.getStorageSync('lng')
        let CityName = uni.getStorageSync('CityName')
        // 接口提交抢单报名
        that.$api.getOfficialActivityAPI({
          poiEventId: that.activity_item.poiEventId, // 商家活动id
          meituanPvId:  uni.getStorageSync('meituanPvId'), // 美团活动id
          do_ratio: that.activity_item.commission.ratio, // 返佣比例
          max_commission:  that.activity_item.commission.maxCommission, // 最大返现金额
          shop_name:  that.detailsData.name, // 商家名称
          picture:  that.detailsData.picture, // 商家logo
          is_comment:  that.activity_item.planActivityType, // 是否需要评论
          dpUrl:  that.detailsData.actionUrl.dpUrl, // dpUrl美团商家链接
          lpUrl:  that.detailsData.actionUrl.lpUrl, // lpUrl美团商家链接
          wxPath:  that.detailsData.actionUrl.wxPath, //  小程序路径
          wxAppid:  that.detailsData.actionUrl.wxAppid, // 小程序appid
          wxAppOrgid:  that.detailsData.actionUrl.wxAppOrgid, // 小程序orgid
          cashBackMode:  0, // 返现模式
          lat: lat, // 纬度
          lon: lon, // 经度
          cityName:  CityName, // 城市名称
        }).then(res => {
          if (res.data.code === 200) {
            console.log('返回数据==', res.data)
            // 抢单须知弹窗
            that.knowShow = true
          } else {
            uni.showToast({title: res.data.msg, icon: "none"})
          }
        }).catch(err => {
          uni.showToast({title: err.data.msg, icon: "none"})
        })
      }
    },
    // 取消订单
    cancelToOrder() {
       let that = this
      that.knowShow = false
      that.clearTimer()
    },
    // 时间定时器
    getTimeFun(num) {
      let that = this
      that.count = num
      that.timer = setInterval(() => {
        if (that.count > 0) {
          that.count--
        } else {
          that.knowShow = false
          // 提交订单并跳转到美团小程序
          that.goMeituanShop()
          clearInterval(that.timer)
          that.timer = null;
        }
      }, 1000)
    },
    // 清除 定时器
    clearTimer() {
      let that = this
      if (that.timer) {
        // 清除定时器
        clearInterval(that.timer);
        that.timer = null;
      }
    },
    // 跳转美团商家页面
    goMeituanShop() {
      let actionUrl = this.detailsData.actionUrl
      uni.openEmbeddedMiniProgram({
        appId: actionUrl.wxAppid,
        path: actionUrl.wxPath,
        success: function (res) {
          console.log(res)
        },
        fail: function (res) {
          console.log(res)
        }
      })
    },
    // 获取用户信息
    GetUserInfo() {
      let that = this
      that.$api.GetuserInfo({}).then(res => {
        // console.log('用户信息==', res.data.result)
        that.userData = res.data.result
        that.mtPhone = res.data.result.mt_mobile
        uni.setStorageSync('userinfo', res.data.result)
      }).catch(err => {
      });
    },
    // 打开客服
    openService(){
      // #ifdef MP
      const data = uni.getStorageSync('customerServiceData')
      //console.log('跳转到客服', data);
      wx.openCustomerServiceChat({
        //企业微信的企业id
        corpId:  data.app.corpId,
        extInfo: {
          //客服链接
          url: data.app.url
        },
        success(res) {
          //console.log('跳转成功', res)
        },
        fail(res) {
          //console.log('跳转失败', res)
        }
      })
      // #endif
    },
    // 取消微信授权绑定手机，返回上一页面
    cancelFun(){
      this.isShowBindPhone = false
    },
    // 微信授权绑定手机
    getPhoneNumber(e){
      this.isShowBindPhone = false
      console.log('用户信息==',e.detail)
      this.$api.getWXPhoneNumber({
        code: e.detail.code,
        encryptedData: e.detail.encryptedData
      }).then(res => {
        console.log('获取用户信息', res)
        uni.showToast({title:'手机号绑定成功！',icon:'success',duration: 2000})
      }).catch(err => {
        uni.showToast({
          title: err,
          icon: 'none',
          duration: 2000
        })
      })
    },
  },
}
</script>

<style lang="scss">
page{
  height: 100%;
  background-color: #F5F5F5;
}
.shopDetail_box {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
/* 自定义导航栏css */
.detail_navbar {
  position: relative;
  z-index: 10;
  background: linear-gradient( 180deg, #FECE37 0%, #FAE437 98%);
}
/* 主题内容css */
.detail_content{
  flex: 1;
  .detail_scroll{
    height: 100%;
    position: relative;
    .detail_bg{
      width: 100%;
      height: 180rpx;
      border-radius: 0 0 50% 50%;
      background: #FAE437;
    }
    .detail_box{
      position: absolute;
      top: 30rpx;
      left: 30rpx;
      right: 30rpx;
      z-index: 10;
      .shops_list{
        background-color: #ffffff;
        border-radius: 20rpx;
        margin-bottom: 30rpx;
        .shop_list_item{
          padding: 20rpx;
          display: flex;
          .shop_info{
            flex: 1;
            display: flex;
            flex-direction: column;
            .shop_name{
              flex: 1;
              font-size: 28rpx;
              font-weight: bold;
              height: 80rpx;
              line-height: 40rpx;
            }
            .adress_shop{
              padding: 10rpx 0;
              .place_text{
                font-size: 24rpx;
                color: #888;
                font-weight: 300;
                margin-left: 10rpx;
                line-height: 44rpx;
                word-break: break-all;
                overflow: hidden;
              }
            }
          }
          .shop_list_item_img{
            width: 150rpx;
            height: 150rpx;
            border-radius: 20rpx;
            overflow: hidden;
            .shop_list_image{
              width: 100%;
              height: 100%;
              display: block;
            }
          }
        }
        .shifupeisong {
          padding: 30rpx;
          color: #666;
          font-size: 24rpx;
          .icons_box {
            display: flex;
            justify-content: space-between;
            view {
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .copy_icon {
              &:before {
                content: '';
                display: inline-block;
                width: 44rpx;
                height: 44rpx;
                background: url('https://lsz.lszbg.com/imgs/old/copy_icon.png') no-repeat center center / 100% 100%;
                margin-right: 5rpx;
              }
            }
            .ps_icon {
              &:before {
                content: '';
                display: inline-block;
                width: 36rpx;
                height: 36rpx;
                background: url('https://lsz.lszbg.com/imgs/old/ps_icon.png') no-repeat center center / 100% 100%;
                margin-right: 10rpx;
              }
            }
            .sb_icon {
              &:before {
                content: '';
                display: inline-block;
                width: 36rpx;
                height: 36rpx;
                background: url('https://lsz.lszbg.com/imgs/old/sb_icon.png') no-repeat center center / 100% 100%;
                margin-right: 10rpx;
              }
            }
            .sb_icon {
              &:before {
                content: '';
                display: inline-block;
                height: 30rpx;
                position: relative;
                top: -5rpx;
              }
            }
          }
        }
      }
      .actives_box {
        background-color: #fff;
        border-radius: 20rpx;
        overflow: hidden;
        margin-bottom: 30rpx;
        box-sizing: border-box;
        padding: 20rpx;
        .tabs_t {
          box-sizing: border-box;
          padding-bottom: 24rpx;

          text {
            font-size: 28rpx;
            color: #999;
            margin-left: 52rpx;
            position: relative;
            box-sizing: border-box;
            padding-bottom: 24rpx;

            &:first-child {
              margin-left: 0;
            }

            &:after {
              content: '';
              display: inline-block;
              width: 36px;
              height: 4px;
              border-radius: 20rpx;
              background-color: #fff;
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              margin: auto;
            }

            &.cur {
              color: #FE5414;

              &:after {
                background-color: #FE874B;
              }
            }
          }
        }

        .small_box {
          display: flex;
          box-sizing: border-box;
          padding: 30rpx 0;
          align-items: center;

          .text_t {
            font-size: 28rpx;
            color: #888;
            font-weight: bold;
            display: flex;
            align-items: center;
            width: 22%;

            &:before {
              content: '';
              display: inline-block;
              width: 38rpx;
              height: 38rpx;
              margin-right: 10rpx;
            }

            &.fs_icon {
              &:before {
                background: url('https://lsz.lszbg.com/imgs/old/fs_icon.png') no-repeat center center / 100% 100%;
              }
            }

            &.yq_icon {
              &:before {
                background: url('https://lsz.lszbg.com/imgs/old/yq_icon.png') no-repeat center center / 100% 100%;
              }
            }

            &.bt_icon {
              &:before {
                width: 40rpx;
                height: 40rpx;
                background: url('https://lsz.lszbg.com/imgs/old/bt_icon.png') no-repeat center center / 100% 100%;
              }
            }
          }

          .val_text {
            font-size: 24rpx;
            font-weight: bold;
            color: #333;
            flex: 1;
            line-height: 40rpx;
          }

          .price_text {
            font-size: 36rpx;
            color: #FE5414;
            font-weight: bold;
            position: relative;
            top: -3rpx;
            display: flex;
            align-items: center;

            text {
              font-size: 28rpx;
            }
          }

          .vip_text {
            font-size: 26rpx;
            color: #FE874B;
            font-weight: bold;
            padding: 0 10rpx;
          }

          .end_text {
            font-size: 24rpx;
            color: #666;
            display: flex;
            align-items: center;
            width: 50%;
          }

          &:last-child {
            border: none;
          }

          .u-line-progress {
            width: 100rpx;
            height: 16rpx;
            border-radius: 100rpx;
            background-color: #FFDECE;
            position: relative;

            .progress {
              width: 50%;
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              background-color: #FF8548;
              border-radius: 100rpx;
            }
          }
        }
      }
    }
  }
}

/* 底部按钮css */
.detail_footer {
  // z-index: 10;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
  .detail_footer_btn{
    padding: 20rpx 30rpx calc(env(safe-area-inset-bottom) + 10rpx);
    display: flex;
    align-items: center;
    background: #FFFFFF;
    .btn-zu1 {
      flex: 1;
      font-size: 30rpx;
      color: #FFFFFF;
      border-radius: 200rpx;
      padding: 25rpx 66rpx;
      text-align: center;
      background: linear-gradient(to right, #FC754A, 50%, #FEBC5B);
      // margin: 0 20rpx 0 auto;
    }
    .btn-zu2 {
      flex: 1;
      font-size: 30rpx;
      margin: 0 auto 0 20rpx;
      background: linear-gradient(to right, #FC754A, 50%, #FEBC5B);
      border-radius: 200rpx;
      padding: 25rpx 36rpx;
      text-align: center;
      color: #ffffff;
      position: relative;

      & .tishi_text {
        box-sizing: border-box;
        padding: 5rpx 30rpx;
        position: absolute;
        top: -40rpx;
        left: 60rpx;
        background-color: #FC754A;
        border: 1px solid #fff;
        border-radius: 20rpx 0 20rpx 0;
        font-size: 24rpx;
      }
    }
    .btn-zu3 {
      margin: 0 auto;
      font-size: 30rpx;
      background: linear-gradient(to right, #999, 50%, #999);
      border-radius: 200rpx;
      padding: 25rpx 66rpx;
      text-align: center;
      color: #ffffff;
      width: 100%;
    }
  }

}
/* 弹窗css */
.pop-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
/* 抢单提示css */
.qd-content {
  width: 600rpx;
  border-radius: 20rpx;
  background: white;
  text-align: center;

  .btns_con {
    display: flex;
    justify-content: flex-end;
    font-size: 26rpx;
    padding: 20rpx 30rpx;
    margin-top: 20rpx;
    border-top: #F3F3F3 1px solid;

    button {
      margin-left: 30rpx;
      font-size: 24rpx;
    }

    .zbbm {
      border-radius: 200rpx;
      width: 176rpx;
      background-color: #FFFFFF;
      border: #DDDDDD 1rpx solid;
      color: #999999;
    }

    .submit {
      border-radius: 200rpx;
      width: 176rpx;
      background: linear-gradient(131deg, #FC754A 0%, #FC754A 0%, #FEB95A 100%);
      color: #FFFFFF;
    }
  }

  .title {
    color: #000000;
    font-size: 32rpx;
    font-weight: bold;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    border-bottom: #F3F3F3 solid 1px;
  }

  .tip {
    margin: 20rpx 38rpx 0;
    font-weight: 500;
    font-size: 26rpx;
    color: #333333;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .tip1 {
    color: #FF3E00;
  }
}
/* 抢单须知css */
.wm_box {
  position: relative;
  width: 600rpx;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 32.5rpx;
  .content_boxs {
    box-sizing: border-box;
    position: relative;

    .know_t {
      font-size: 32rpx;
      color: #000;
      text-align: center;
      box-sizing: border-box;
      padding: 20rpx;
      border-bottom: 1px solid #eee;
    }

    .btns_box {
      width: 280rpx;
      height: 64rpx;
      background: linear-gradient(270deg, #FEB85A 0%, #FC754A 100%);
      border-radius: 50rpx;
      font-size: 28rpx;
      color: #fff;
      line-height: 64rpx;
      text-align: center;
    }

    .btns_cancel {
      width: 200rpx;
      height: 64rpx;
      background: linear-gradient(270deg, #d2d2d2 0%, #a2a0a0 100%);
      border-radius: 50rpx;
      font-size: 28rpx;
      color: #fff;
      line-height: 64rpx;
      text-align: center;
    }
  }
}
/* 微信授权绑定手机css */
.bind_phone_box{
  width: 100%;
  .bind_phone_title{
    font-size: 32rpx;
    text-align: center;
    color: #333333;
    line-height: 80rpx;
  }
  .bind_phone_content{
    padding: 30rpx 20rpx;
    .bind_phone_content_text{
      font-size: 28rpx;
      color: #888888;
      line-height: 60rpx;
    }
  }
  .bind_phone_content_btn{
    display: flex;
    justify-content: space-between;
    padding: 0 30rpx;
    line-height: 80rpx;
    font-size: 28rpx;
    color: #333333;
    .wechat-btn{
      width: 50%;
      background: none;
    }
    .wechat-btn:after{

      border: none;
    }
  }
}
</style>
